<!DOCTYPE html>
<html lang="zh_CN">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
<div id="app">
    <p>n:{{ n }}</p>
    <button @click="add">n+1</button>
    <hr>
    <ul v-for="ele in newsList">
        <li>序号：{{ ele.id }}</li>
        <li>名称：{{ele.title}}</li>
        <li>详情：{{ ele.description }} </li>
    </ul>
</div>

</body>
<script src="https://cdn.bootcdn.net/ajax/libs/axios/1.2.1/axios.js"></script>

<script src="lib/vue/vue.js"></script>

<script type="text/javascript">


    const vm = new Vue({
        el: '#app',
        data: {
            n: 1,
            newsList: [],
        },
        methods: {
            add(n) {
                this.n += 1;
            }
        },
        /*
        * 生命周期函数特点：
        * 1. 名称是框架规定好了的，我们只需要在对应的函数里面填写自己的业务
        * 代码即可
        *
        * 2. 生命周期函数会自动的执行，无法开发者手工的调用
        *
        * 下面的这四个会在页面初次渲染的时候进行调用
        *
        * 一般在生命周期函数里面做什么操作？
        * 答：我们一般在生命周期函数里面做接口的请求。
        *
        * 现在做的项目一般都是前后端分离的。前端需要调用后端提供的接口然后得到数据，最后进行页面的渲染。
        *
        * 在什么时间去调用这些接口呢？
        * 1. 这四个里面都可以做网络请求
        *
        * 考虑问题：我们通过接口拿到的数据，最终是需要在页面渲染的，那么我们就需要在生命周期函数里面可以访问到我们的 data ，然后把接口返回的数据赋值给data，然后vuejs会自动的更新视图
        *
        * 那我们的接口请求应该尽可能早的去发送请求（接口请求耗时）
        *
        * 一般我们是在 created
        *
        *
        * */
        beforeCreate() {
            console.log('beforeCreate', this.$data); // this.$data 拿到 data
        },
        async created() {
            console.log('created', this.$data);
            /*
            * 1. 接口（后端程序员提供接口）
            * http://jy.52kfw.cn/#/home
            *
            * https://yw.52kfw.cn/api/news/flist?currentPage=1&pageSize=100&cate_id=%E6%9C%80%E6%96%B0%E6%97%B6%E8%AE%AF
            *
            *
            * 2. 发送请求（axios）
            *
            * */
            let url = 'https://yw.52kfw.cn/api/news/flist?currentPage=1&pageSize=100&cate_id=%E6%9C%80%E6%96%B0%E6%97%B6%E8%AE%AF';
            let rs = await axios.get(url);
            console.log(rs);
            this.newsList = rs.data.data.list;

        },
        beforeMount() {
            console.log('beforeMount', this.$data);
        },
        mounted() {
            console.log('mounted', this.$data);
        }

    })

</script>

</html>
